
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css">
    <link rel="stylesheet" href="./login.css">
    <style type="text/css">
        body{
        background-image:url('https://i.loli.net/2021/06/08/FOLZKQmkG9dwV5q.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        }
        #login_box{
            width: 50%;
            height: 800px;
            background:#02FFEE;
            margin:auto;
            margin-top: 0%;
            text-align: center;
            border-radius: 10px;
            padding: 100px 100px;
        }
        #login_box h2{
            color: #de664c;
            margin-top: 30%;
        }
        #login_box #form #input_box{
            margin-top: 5%;
        }
        #login_box #form #input_box i{
            color: rgba(232, 231, 183, 0.19);
        }
        #login_box #form #input_box input{
            border:0;
            width: 60%;
            font-size: 15px;
            color: #fff;
            background: #ffffff00;
            border-bottom: 2px solid#eacda950;
            padding: 5px 10px;
            margin-top: 10px;
        }
        #login_box button{
            margin-top: 50px;
            width: 40%;
            height: 30px;
            border-radius: 10px;
            border: 0;
            color: #fff;
            font-size: 15px;
            background-image: linear-gradient(to top, #4d3030 0%, #985f5f 100%);
        }
        #login_box #Sign{
            margin-top: 45%;
            margin-left: 60%;
        }
        #login_box #Sign a{
            color: #d1c2d8;
        }
    </style>
</head>

<body>
    <div id="login_box">
        <form action="/tianqi" method="post">
            <h2>驾车路径规划查询结果如下：</h2>
			<P>如果需要可视化界面请访问https://www.amap.com/</P>
            <table>
              <tr><td>起点</td><td>{{ the_start_address }}</td></tr>
                <tr><td>终点</td><td>{{ the_end_address }}</td></tr>
            </table>
            <p>本次行程距离为{{ the_total_drive }}米，预计花费约{{ the_total_drive_time }}分钟，具体指引如下：</p>
            {{ the_html_table|safe }}
            <button>返回</button><br>
        </form>
    </div>
</body>
